<template>
    <div class="home-content width1190">
        <el-row class="slide-show-login" type="flex" justify="space-around">
            <!-- 分类 -->
            <el-col class="classify">
                <h3>全部分类</h3>
                <div class="classify-content">
                    <dl class="classify_dl" v-for="(list, index) in classifyData" :key="index">
                        <dt class="classify_dt">
                            <i :class="['left', 'el-icon-' + list.type]"></i>
                            <span>{{ list.name }}</span>
                            <i class="right el-icon-arrow-right"></i>
                        </dt>
                        <dd class="classify_dd">
                            <div class="classify_children" v-for="(i, index) in list.items" :key="index">
                                <el-row class="children-title" type="flex" justify="space-between">
                                    <h3>
                                        <a href="javascript:;">{{ i.title }}</a>
                                    </h3>
                                    <p><a href="javascript:;">更多</a><i class="el-icon-arrow-right"></i></p>
                                </el-row>
                                <ul class="children-end">
                                    <li v-for="(j, index) in i.items" :key="index">
                                        <a href="javascript:;">{{ j }}</a>
                                    </li>
                                </ul>
                            </div>
                        </dd>
                    </dl>
                </div>
            </el-col>
            <!-- 轮播图 -->
            <el-col class="slide_show" :span="12" :lg="{ span: 11 }">
                <el-row class="slide">
                    <el-carousel height="240px" :interval="5000">
                        <el-carousel-item v-for="pic in carouselList" :key="pic.id">
                            <a href="javascript:;">
                                <img :src="pic.img" alt="" />
                            </a>
                        </el-carousel-item>
                    </el-carousel>
                </el-row>
                <el-row class="slide-pic" type="flex" justify="space-between" :gutter="10">
                    <el-col
                        ><a href="javascript:;"> <img src="../static/hotel.png" alt="" /> </a
                    ></el-col>
                    <el-col>
                        <a href="javascript:;">
                            <img src="../static/other.png" alt="" />
                        </a>
                    </el-col>
                </el-row>
            </el-col>

            <!-- 图片区域 -->
            <el-col class="pic hidden-md-and-down">
                <el-row class="pic-top">
                    <a href="javascript:;">
                        <img src="../static/life.jpg" alt="" />
                    </a>
                </el-row>
                <el-row class="pic-bottom">
                    <a href="javascript:;">
                        <img src="../static/storePerson.jpg" alt="" />
                    </a>
                </el-row>
            </el-col>

            <!-- 登录 区域 -->
            <el-col class="login-module">
                <el-row class="login-module-top">
                    <div class="avatar">
                        <img src="../static/avatar.jpg" alt="" />
                    </div>
                    <p>Hi! 你好</p>
                    <el-button round @click="$router.push('/register')">注册</el-button>
                    <el-button round @click="$router.push('/login')">立即登录</el-button>
                </el-row>
                <el-row class="qr-code">
                    <img src="../static/qr-code.png" alt="" />
                    <p>美团APP手机版</p>
                    <p class="small"><span>一元起</span>吃喝玩乐</p>
                </el-row>
            </el-col>
        </el-row>

        <!-- movie -->
        <el-row class="movie">
            <div class="movie-nav">
                <dl>
                    <dt>猫眼电影</dt>
                    <dd :class="[activeIndex == 1 ? 'active' : '']" @mouseenter="changeShowMovie(1)">正在热映</dd>
                    <dd :class="[activeIndex == 2 ? 'active' : '']" @mouseenter="changeShowMovie(2)">即将上映</dd>
                </dl>
                <span>
                    全部
                    <i class="el-icon-arrow-right"></i>
                </span>
            </div>
            <div class="scroll" ref="divRef">
                <ul ref="ulRef" class="movie-content" :style="{ left: ulLeft + 'px' }">
                    <li class="movie-list" v-for="item in showMovie" :key="item.id">
                        <a href="javascript:;">
                            <img class="big-img" :src="item.img" alt="" />
                            <img v-if="item.mark" class="mark-img" :src="item.mark" alt="" />
                            <div class="movie-info">
                                <div class="score">
                                    <b v-if="item.wantToSee"
                                        ><span class="wantToSee">{{ item.wantToSee }}</span
                                        >想看</b
                                    >
                                    <b v-else
                                        >观众评<span class="score">{{ item.score }}</span></b
                                    >
                                </div>
                                <div class="movie-name">
                                    <p>{{ item.movieName }}</p>
                                    <span class="btn">{{ item.score ? '购买' : '预售' }}</span>
                                </div>
                            </div>
                        </a>
                    </li>
                </ul>
                <span @click="scrollPosition('left')" class="left el-icon-arrow-left"></span>
                <span @click="scrollPosition('right')" class="right el-icon-arrow-right"></span>
            </div>
        </el-row>
        <!-- 民宿 -->
        <el-row class="homestay">
            <dl class="homestay-nav">
                <dt>推荐民宿</dt>
                <dd @mouseenter="changeHomestayActive(index)" :class="homestayActiveIndex == index ? 'active' : ''" v-for="(item, index) in homestay" :key="index">{{ item }}</dd>
            </dl>
            <ul class="homestay-content">
                <li v-for="item in 6" :key="item" class="homeImg">
                    <a href="javascript:;">
                        <img src="../static/homestay.jpg" alt="" />
                        <img class="user-avatar" src="../static/avatar.jpg" alt="" />
                        <div class="homestay-detail">
                            <p class="title">【极简·木马舍】南京江宁融信铂岸中心投xxxxxx</p>
                            <p class="detail">
                                <span>整套1居室</span>·<span>可住2人 </span>|<span> 江宁开发区--{{ homestay[homestayActiveIndex] }}</span>
                            </p>
                            <p class="price">¥ 999</p>
                        </div>
                    </a>
                </li>
            </ul>
        </el-row>
        <!-- 猜你喜欢 -->
        <el-row class="guessYouLink">
            <el-row class="guess-nav" type="flex">
                <h3>猜你喜欢</h3>
                <p>为你甄选最合适的</p>
            </el-row>
            <ul class="goods-detail">
                <li v-for="(goods, index) in guessYouLinkData" :key="index">
                    <a href="javascript:;">
                        <img :src="goods.image" alt="" />
                        <div class="goods-detail">
                            <p class="goods-title">{{ goods.subTitle }}</p>
                            <el-rate v-model="goods.rate" disabled show-score text-color="#ff9900"> </el-rate>
                            <p class="goods-address">{{ goods.address }}</p>
                            <p class="goods-price"><span>¥</span> {{ goods.price }} <span>起</span></p>
                        </div>
                    </a>
                </li>
            </ul>
        </el-row>
        <!-- 热门城市 -->
        <el-row class="other">
            <h3 class="other-title">美团导航</h3>
            <dl class="hot-city">
                <dt>热门城市</dt>
                <dd>
                    <a href="javascript:;" v-for='(city,index) in hotCity' 
                    :key='city.id'>{{city.name}}  <span v-if='index==0' class='hot'>HOT</span></a>
                </dd>
            </dl>
            <dl class="hot-categories">
                <dt>热门分类</dt>
                <dd>
                    <a href="javascript:;" v-for='item in 20 ' 
                    :key='item'>{{item}} </a>
                </dd>
            </dl>
            <dl class="hot-circum">
                <dt>周边热门</dt>
                <dd class='end'>
                   <a href="javascript:;" v-for='item in 20 ' :key='item'>{{item}}</a>
                </dd>
            </dl>
        </el-row>
    </div>
</template>

<script>
export default {
    data() {
        return {
            classifyData: [],
            carouselList: [],
            activeIndex: 0,
            ulLeft: 0,
            showMovie: [],
            hotMovieData: [
                {
                    id: 0,
                    mark: require('../static/mark.png'),
                    score: 9.5,
                    movieName: '误杀2',
                    img: require('../static/wusha.jpg'),
                },
                {
                    id: 1,
                    wantToSee: 12345,
                    movieName: '误杀2',
                    img: require('../static/wusha.jpg'),
                },
                {
                    id: 2,
                    wantToSee: 12345,
                    movieName: '误杀2',
                    img: require('../static/wusha.jpg'),
                },
                {
                    id: 3,
                    score: 9.5,
                    movieName: '误杀2',
                    img: require('../static/wusha.jpg'),
                },
                {
                    id: 4,
                    mark: require('../static/mark.png'),
                    score: 9.5,
                    movieName: '误杀2',
                    img: require('../static/wusha.jpg'),
                },
                {
                    id: 5,
                    mark: require('../static/mark.png'),
                    wantToSee: 12345,
                    movieName: '误杀2',
                    img: require('../static/wusha.jpg'),
                },
                {
                    id: 6,
                    score: 9.5,
                    movieName: '误杀2',
                    img: require('../static/wusha.jpg'),
                },
                {
                    id: 7,
                    mark: require('../static/mark.png'),
                    score: 9.5,
                    movieName: '误杀2',
                    img: require('../static/wusha.jpg'),
                },
                {
                    id: 8,
                    wantToSee: 12345,
                    movieName: '误杀2',
                    img: require('../static/wusha.jpg'),
                },
            ],
            beOnMovieData: [
                {
                    id: 2,
                    wantToSee: 12345,
                    movieName: '反贪风暴5xxxxxx',
                    img: require('../static/fantan.jpg'),
                },
                {
                    id: 7,
                    mark: require('../static/mark.png'),
                    score: 9.5,
                    movieName: '反贪风暴5xxxxxx',
                    img: require('../static/fantan.jpg'),
                },
                {
                    id: 3,
                    score: 9.5,
                    movieName: '反贪风暴5xxxxxx',
                    img: require('../static/fantan.jpg'),
                },
                {
                    id: 4,
                    mark: require('../static/mark.png'),
                    score: 9.5,
                    movieName: '反贪风暴5xxxxxx',
                    img: require('../static/fantan.jpg'),
                },
                {
                    id: 5,
                    mark: require('../static/mark.png'),
                    wantToSee: 12345,
                    movieName: '反贪风暴5xxxxxx',
                    img: require('../static/fantan.jpg'),
                },
                {
                    id: 0,
                    mark: require('../static/mark.png'),
                    score: 9.5,
                    movieName: '反贪风暴5xxxxxx',
                    img: require('../static/fantan.jpg'),
                },
                {
                    id: 1,
                    wantToSee: 12345,
                    movieName: '反贪风暴5xxxxxx',
                    img: require('../static/fantan.jpg'),
                },
                {
                    id: 6,
                    score: 9.5,
                    movieName: '反贪风暴5xxxxxx',
                    img: require('../static/fantan.jpg'),
                },

                {
                    id: 8,
                    wantToSee: 12345,
                    movieName: '反贪风暴5xxxxxx',
                    img: require('../static/fantan.jpg'),
                },
            ],
            // 民宿
            homestay: ['上海', '南京', '杭州', '苏州', '合肥', '南昌', '宁波', '无锡', '扬州', '嘉兴'],
            homestayActiveIndex: 0,
            guessYouLinkData: [],
            hotCity:[]
        }
    },
    created() {
        for (let i = 0; i <= 2; i++) {
            this.carouselList.push({ id: i, img: require(`../static/carousel${i}.jpg`) })
        }
        this.getClassifyData()
        this.changeShowMovie(1)
        this.getGuessYouLinkData()
        this.getHotCity()
    },
    methods: {
        async getClassifyData() {
            const res = await this.$store.dispatch('getRequest', { path: '/api/meituan/index/nav.json' })
            this.classifyData = res
        },

        scrollPosition(val) {
            let W = this.$refs.ulRef.scrollWidth
            let w = this.$refs.divRef.offsetWidth
            if (val == 'left') {
                if (this.ulLeft >= 0 || this.ulLeft + w >= 0) {
                    this.ulLeft = 0
                } else {
                    this.ulLeft += w
                }
            } else {
                if (this.ulLeft <= -W + w || this.ulLeft - w < -W + w) {
                    this.ulLeft = -W + w
                } else {
                    this.ulLeft -= w - 20
                }
            }
        },
        changeShowMovie(val) {
            if (this.activeIndex == val) {
                return
            } else {
                this.activeIndex = val
                if (val == 1) {
                    this.showMovie = this.hotMovieData
                } else {
                    this.showMovie = this.beOnMovieData
                }
            }
        },
        changeHomestayActive(index) {
            if (this.homestayActiveIndex == index) {
                return
            } else {
                this.homestayActiveIndex = index
            }
        },
        async getGuessYouLinkData() {
            const { all, spa, food } = await this.$store.dispatch('getRequest', { path: '/api/meituan/index/resultsByKeywords.json' })
            var data = [...all, ...spa, ...food]
            data.push(...data, ...data)
            data.forEach(item => {
                item.rate = Number(this.randomRate())
            })
            this.guessYouLinkData = data
        },
        randomRate() {
            return (Math.random() * (5 - 3) + 3).toFixed(1)
        },
        async getHotCity(){
           const res=await this.$store.dispatch('getRequest',{path:'/api/meituan/city/hot.json'})
           this.hotCity=res
           console.log(res);
        }
    },
}
</script>

<style lang="less" scoped>
@import '../util/public.less';
div.home-content {
    position: relative;
    .el-row.slide-show-login {
        & > .el-col {
            height: 415px;
        }
        // 分类
        .el-col.classify {
            position: relative;
            bottom: 75px;
            height: 490px;
            width: 230px;
            background: #fdfdfd;
            border: 1px solid #e1e1e1;
            h3 {
                height: 50px;
                line-height: 50px;
                margin: 0;
                padding-left: 15px;
            }
            div.classify-content {
                position: absolute;
                bottom: 0;
                height: 410px;
                width: 100%;
                dl.classify_dl {
                    height: 28px;
                    margin: 0;
                    &:hover dd.classify_dd {
                        display: block;
                    }
                    dt.classify_dt {
                        position: relative;
                        height: 28px;
                        line-height: 28px;
                        display: flex;
                        &:hover {
                            background: #eee;
                            font-weight: bold;
                            cursor: pointer;
                            & > i.right {
                                font-weight: bolder;
                            }
                        }
                        i {
                            height: 28px;
                            width: 28px;
                            line-height: 28px;
                            text-align: center;
                            span {
                                line-height: 29px;
                            }
                            &.right {
                                position: absolute;
                                right: 10px;
                                color: @mt-888;
                            }
                        }
                    }
                    dd.classify_dd {
                        display: none;
                        position: absolute;
                        height: 425px;
                        width: 430px;
                        left: 230px;
                        top: 0px;
                        margin: 0;
                        background: #fff;
                        z-index: 999;
                        div.classify_children {
                            position: relative;
                            height: 100%;
                            width: 100%;
                            .el-row.children-title {
                                height: 50px;
                                width: 390px;
                                margin: 0 auto;
                                border-bottom: 1px solid #ddd;
                                p a,
                                i {
                                    color: #888 !important;
                                }
                            }
                            ul.children-end {
                                padding: 0 25px !important;
                                display: flex;
                                justify-content: flex-start;
                                li {
                                    padding: 10px;
                                    a {
                                        color: @mt-888 !important;
                                        .hoverFn();
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
        // 轮播图
        .el-col.slide_show {
            .el-row.slide {
                .el-carousel {
                    width: 100%;
                    box-sizing: border-box;
                    img {
                        height: 100%;
                        width: 100%;
                    }
                }
            }
            .el-row.slide-pic {
                box-sizing: border-box;
                .el-col {
                    margin-top: 10px;
                    height: 165px;
                    a {
                        width: 230px;
                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }
                }
            }
        }

        .el-col.pic {
            width: 150px;
            .el-row.pic-top {
                height: 240px;
            }
            .el-row.pic-bottom {
                height: 165px;
                margin-top: 10px;
            }
            img {
                width: 100%;
                height: 100%;
            }
        }

        // 登录区域
        .el-col.login-module {
            width: 230px;

            .el-row.login-module-top {
                height: 240px;
                display: flex;
                flex-direction: column;
                border: 1px solid #ddd;
                text-align: center;
                justify-content: space-evenly;
                div.avatar {
                    img {
                        height: 55px;
                        width: 55px;
                        border: 3px solid #ddd;
                        border-radius: 50%;
                    }
                }
                p {
                    margin: 0;
                }
                .el-button {
                    width: 120px;
                    margin: 0 auto;
                }
            }
            .el-row.qr-code {
                border: 1px solid #ddd;
                margin-top: 10px;
                text-align: center;
                height: 165px;
                display: flex;
                flex-direction: column;

                align-items: center;

                img {
                    width: 95px;
                    height: 95px;
                    margin-top: 15px;
                }
                p {
                    margin: 0;
                    &.small {
                        font-size: 12px;
                        & > span {
                            color: #f00;
                            margin-right: 5px;
                        }
                    }
                }
            }
        }
    }

    // 电影区域
    .el-row.movie {
        position: relative;

        div.movie-nav {
            display: flex;
            justify-content: space-between;
            padding: 0 20px;
            background: #fd4453;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            height: 46px;
            color: #fff;
            margin-top: -30px;
            & > dl {
                display: flex;
                margin: 0;
                cursor: pointer;
                width: 300px;
                dt {
                    font-size: 18px;
                    line-height: 46px;
                }
                dd {
                    position: relative;
                    line-height: 50px;
                    cursor: pointer;
                    margin-left: 20px;
                    &.active:after {
                        content: '';
                        position: absolute;
                        border: 10px solid #fff;
                        border-color: transparent transparent #fff transparent;
                        left: 50%;
                        transform: translateX(-50%);
                        bottom: 0;
                    }
                }
            }
            & > span {
                line-height: 46px;
                cursor: pointer;
            }
        }
        div.scroll {
            position: relative;
            width: 100%;
            height: 300px;
            overflow: hidden;
            // transition: all 0.5;
            &:hover > span {
                opacity: 0.8;
            }
            & > span {
                position: absolute;
                transition: opacity 0.7s;
                color: #fff;
                opacity: 0;
                top: 50%;
                height: 40px;
                width: 40px;
                font-size: 30px;
                font-weight: bolder;
                line-height: 40px;
                text-align: center;
                transform: translateY(-50%);
                cursor: pointer;
                &:after {
                    content: '';
                    position: absolute;
                    height: 100%;
                    top: 0;
                    left: 0;
                    width: 100%;
                    background: #000;
                    opacity: 0.4;
                    border-radius: 50%;
                }
                &.left {
                    left: 15px;
                }
                &.right {
                    right: 15px;
                }
            }
            ul.movie-content {
                position: absolute;
                margin-top: 5px !important;
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
                transition: all 0.5s;
                li.movie-list {
                    position: relative;
                    height: 297px;
                    width: 214px;
                    flex-shrink: 0;
                    margin: 0 10px;
                    img.big-img {
                        border-radius: 5px;
                    }
                    img.mark-img {
                        position: absolute;
                        top: 20px;
                        left: -10px;
                        height: 20px;
                        width: 55px;
                    }
                    div.movie-info {
                        position: absolute;
                        bottom: 0;
                        height: 100px;
                        width: 100%;
                        color: #fff;
                        z-index: 10;
                        display: flex;
                        flex-direction: column;
                        justify-content: flex-end;
                        z-index: 999;
                        &:after {
                            content: '';
                            height: 100%;
                            position: absolute;
                            top: 0;
                            left: 0;
                            width: 100%;
                            height: 100%;
                            z-index: -1;
                            background: linear-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.8) 100%);
                        }
                        div.score {
                            padding: 0 10px;
                            b {
                                height: 24px;
                                line-height: 24px;
                                & > span {
                                    color: @mt-color;
                                    font-size: 17px;
                                    font-weight: 500;
                                    &.wantToSee {
                                        margin-right: 10px;
                                    }
                                    &.score {
                                        margin-right: 10px;
                                    }
                                }
                            }
                        }
                        div.movie-name {
                            display: flex;
                            justify-content: space-between;
                            box-sizing: border-box;
                            padding: 0 10px;
                            margin-bottom: 10px;
                            p {
                                margin: 0;
                                width: 100px;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                            }
                            span.btn {
                                height: 25px;
                                display: inline-block;
                                width: 52px;
                                border-radius: 12px;
                                background: #fd4453;
                                text-align: center;
                                line-height: 25px;
                            }
                        }
                    }
                }
            }
        }
    }

    // 民宿
    .el-row.homestay {
        position: relative;
        margin: 40px 0;
        background: #fff;
        border: 1px solid #eee;
        border-radius: 10px;
        dl.homestay-nav {
            margin: 0;
            padding: 0 15px;
            color: #fff;
            display: flex;
            height: 46px;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            background: #f2c345;
            line-height: 46px;
            dt {
                height: 100%;
                font-size: 18px;
                line-break: 46px;
                margin-right: 10px;
            }
            dd {
                position: relative;
                line-height: 50px;
                cursor: pointer;
                margin: 0 10px;
                text-align: center;
                &.active:after {
                    content: '';
                    position: absolute;
                    left: 50%;
                    bottom: 0;
                    transform: translateX(-50%);
                    border: 10px solid;
                    border-color: transparent transparent #fff transparent;
                }
            }
        }
        ul.homestay-content {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            margin-top: 5px !important;
            li {
                position: relative;
                img.user-avatar {
                    height: 50px;
                    width: 50px;
                    border-radius: 50%;
                    border: 2px solid #fff;
                    right: 20px;
                    bottom: 100px;
                    position: absolute;
                }
                div.homestay-detail {
                    position: absolute;
                    bottom: 10px;
                    p {
                        width: 100%;
                        margin: 10px 0;
                    }
                    p.title {
                        width: 280px;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        white-space: nowrap;
                    }

                    p.price {
                        color: @mt-color;
                        font-size: 18px;
                    }
                }
            }
        }
    }

    // 猜你喜欢
    .el-row.guessYouLink {
        // height: 20px;
        border-radius: 10px;
        overflow: hidden;
        color: #fff;
        border: 1px solid #eee;
        box-sizing: border-box;
        .el-row.guess-nav {
            height: 44px;
            background: #46bbd0;
            > h3 {
                line-height: 44px;
                margin: 0 20px 0;
            }
            p {
                position: relative;
                height: 100%;
                margin: 0;
                line-height: 44px;
                &:after {
                    content: '';
                    border: 10px solid;
                    border-color: transparent transparent #fff;
                    bottom: 0px;
                    position: absolute;
                    left: 50%;
                    transform: translateX(-50%);
                }
            }
        }
        > ul.goods-detail {
            margin-top: 10px !important;
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            height: 678px;
            overflow: hidden;
            > li {
                position: relative;
                height: 226px;
                width: 213px;
                img {
                    height: 120px;
                    width: 100%;
                    border-radius: 5px;
                }
                div.goods-detail {
                    position: absolute;
                    bottom: 5px;
                    p {
                        margin: 2px 0;
                        &.goods-address {
                            font-size: 12px;
                            color: @mt-888;
                        }
                        &.goods-price {
                            font-size: 18px;
                            color: @mt-color;
                        }
                        span {
                            font-size: 14px;
                        }
                    }
                }
            }
        }
    }

    // 热门
    .el-row.other {
        margin-top: 30px;
        border: 1px solid #eee;
        border-radius: 5px;
        h3.other-title {
            font-weight: 500;
            padding-left: 24px;
            font-size: 18px ;
        }
       dl{
           display: flex;

           dt{
               width: 120px;
               margin: 0;
               text-align: center;
               line-height: 20px;
           }
           dd{
               margin: 0;
               border-bottom: 1px solid #eee;
               width: 100%;
                &.end{
                    border-bottom: none;
                }
               a{
                   display: inline-block;
                   width: 80px;
                   margin: 0px 20px 10px 0;
                   color: #777 !important;
                .hoverFn();
                    span.hot{
                    background:#FF4848;  
                    color: #fff;
                    border-radius: 10px;
                    padding: 0 5px;
                    }
               }
           }
       }
    }
}
</style>
